<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS项目</title>
    <link rel="stylesheet" href="src/css/init.css">
    <style>
        .nav {
            width: 1280px;
            display: flex;
            justify-content: space-between;
            padding: 20px 40px;
        }

        .nav-left {
            display: flex;
            gap: 100px;
            align-items: center;
        }
        .nav-right {
            display: flex;
            gap: 20px;
            align-items: center;
            font-size: 0.8rem;
        }


        .part1 {
            width: 1280px;
            display: flex;
            justify-content: space-between;
            height: auto;
            align-items: center;
        }
        .part1-left {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 20px 0;
            width: 500px;
            height: 600px;
            border: 2px solid blue;
        }
        .part1-right {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 800px;
            height: 600px;
            border: 2px solid yellow;
            z-index: 0
        }

        .part2 {
            width:1280px;
            border: 2px solid salmon;
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 1.5rem 1.5rem;
        }

        .part2-top {
            border: 2px solid #e2992b;
        }

        .part2-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px
        }

        .part3 {
            width:1280px;
            border: 2px solid rebeccapurple;
        }
        .part3-top {
            display: flex;
            gap: 40px
        }
        .part3-bottom {
            height: 500px;
            position: relative;
        }

        .tab-content {
            height: 500px;
            width: 100%;
            border: 4px solid greenyellow;
            transition: opacity 0.2s ease;
            position: absolute;
        }

        .tab-label {
            font-size: 1.5rem;
            font-weight: bold;
            padding: 0 1.5rem;
            height: 60px;
            line-height: 60px;
            color: gray;
            cursor: pointer;
        }

        .tab-label:hover {
            font-weight: bold;
            color: rgba(0, 0, 0, 0.79);
        }

        .tab-active {
            font-weight: bold;
            color: black;
            border-bottom: 6px solid gray;
        }

        .part4 {
            width: 1280px;
            border: 4px solid aqua;
            display: flex;
            flex-direction: column;
            padding: 1rem 1rem;
        }
        .part4-top {
            border: 2px solid cadetblue;
            padding: 1rem 1rem;
        }
        .part4-bottom {
            border: 2px solid sienna;
            display: flex;
            justify-content: space-between;
            padding: 1rem 2rem;
        }

        .part5 {
            width: 1280px;
            height: 800px;
            background: black;
            color: #dddddd;
            display: flex;
            flex-direction: column;
            padding: 1.2rem;
            gap: 20px
        }
        .part5-top {

        }
        .part5-bottom {
            display: grid;
            grid-template-columns: 1fr 1fr 1.5fr;
            grid-template-rows: 1fr 1fr;
            gap:60px;
            flex: 1;
        }

        .part6 {
            width: 1280px;
            display: flex;
            padding: 1.2rem 4rem;
            height: 600px;
            border: 5px solid chartreuse;
        }

        .part6-left {

        }

        .part6-right {
            flex: 1;
            padding: 1.5rem;
        }

        .part7 {
            width: 1280px;
            display: flex;
            flex-direction: column;
            padding: 1.3rem;
            gap: 50px;
        }

        .part7-top {

        }

        .part7-bottom {

        }

        .part8 {
            width: 1280px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .part8-top {
            display: flex;
            justify-content: space-between;
            padding: 1.5rem 5rem;
        }
        .part8-bottom {
            display: flex;
            justify-content: space-between;
            padding: 0 5rem;
        }

        .part9 {
            width: 1280px;
            display: flex;
            flex-direction: column;
            gap: 80px;
            padding: 5rem;
        }
        .part9-top {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .part9-bottom {
            display: flex;
            flex-direction: column;
        }

        #search-box {
            margin-top: 40px;
            display: flex;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            border-radius: 15px;
            overflow: hidden;
        }

        #search-box>input {
            width: 500px;
            height: 46px;
            outline: none;
            padding-left: 15px;
            border: none;
        }

        #search-box>button {
            width: 80px;
            background: black;
            color: #f1f1f1;
            font-size: 0.8rem;
        }

        .price:hover {
            background: black;
            color: #f1f1f1;
        }


    </style>
</head>

<body>

<div style="display: flex; justify-content: center; min-width: 1280px;">
    <div class="nav">
        <div class="nav-left">
            <div style="display: flex; align-items: center; gap:8px">
                <img src="./src/imgs/logo.svg" alt="logo" width="30px">
                <span style="font-weight: bold; font-size: 1.2rem">Funtask</span>
            </div>
            <div style="display: flex; gap: 30px; font-size: 0.9rem">
                <span>Products</span>
                <span>Pricing</span>
                <span>About</span>
                <span>Contact Us</span>
            </div>
        </div>

        <div class="nav-right">
            <div>Log In</div>
            <div style="background: black; color: white; padding: 10px 20px; border-radius: 6px">Sign Up</div>
        </div>
    </div>
</div>
<div style="display: flex; justify-content: center; min-width: 1280px; background-image: linear-gradient(to top, rgba(168, 237, 234, 0.6) 0%, rgba(254, 214, 227, 0.6) 100%);">
    <div class="part1">
        <div class="part1-left">
            <div style="display: flex; flex-direction: column; gap: 20px">
                <div style="font-size: 5rem; white-space: pre-line; font-weight: 600; letter-spacing: 2px">New
                    Generation
                    Workplace</div>
                <div style="font-size: 1.4rem; font-weight: 300">研究
                    <span style="display: inline-block; padding: 6px 10px; text-align: center; font-weight: 500; background: black; color: white; border-radius: 10px; box-shadow: 0 10px 20px rgba(0,0,0,0.45)">1<span style="font-size: 0.8rem; vertical-align: top">st</span></span>
                    是怎么做出来的</div>

            </div>

            <div style="display: flex; flex-direction: column; gap: 40px">
                <div style="background: #f67f03; border-radius: 80px; width: 250px; height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 20px 30px; box-shadow: 0 10px 20px rgba(0,0,0,0.4)">
                    <div style="color: white; font-weight: 600; font-size: 1.2rem">Get Started</div>
                    <div style="color: white; font-weight: 600; font-size: 1.2rem">&rarr;</div>
                </div>
                <div style="font-size: 0.8rem; font-weight: 600">schedule demo</div>
            </div>

        </div>
        <div class="part1-right">
            <div style="width: 400px; height: 400px; background: white; position: absolute; border-radius: 50%; opacity: 0.5; z-index: 1; transform: translateY(50px)"></div>
            <span style="position: absolute; font-size: 16rem; color: white; z-index: 2">axes</span>

            <img src="./src/imgs/person.png" alt="" style="height: 100%; z-index: 3">

            <div style="position: absolute">
                <div style="width: 100px; height: 100px; background: #e2992b; transform: translateX(330px) translateY(100px); border-radius: 50%; box-shadow: 0 10px 20px rgba(0,0,0,0.28)">
                    <img src="./src/imgs/avater1-removebg.png" alt="" style="width: 100%;border-radius: 50%">
                </div>
                <div style="width: 100px; height: 100px; background: #e84abc; transform: translateX(-330px) translateY(-200px); border-radius: 50%; box-shadow: 0 10px 20px rgba(0,0,0,0.28)">
                    <img src="./src/imgs/avater2-removebg.png" alt="" style="width: 100%;border-radius: 50%">
                </div>
                <div style="width: 100px; height: 100px; background: rgba(144,226,43,0.54); transform: translateX(-330px) translateY(100px); border-radius: 50%; box-shadow: 0 10px 20px rgba(0,0,0,0.28)">
                    <img src="./src/imgs/avater3-removebg.png" alt="" style="width: 100%;border-radius: 50%">
                </div>
            </div>

        </div>
    </div>
</div>
<div style="display: flex; justify-content: center; min-width: 1280px">
    <div class="part2">

        <div class="part2-top">
            <div style="margin-bottom: 10px">What's Funtask</div>
            <div style="font-weight: 600; font-size: 2rem; white-space: pre-line">The ALL-In-One Employee
            Engagement Platform</div>
        </div>

        <div class="part2-bottom">
            <div style="border: 2px solid #e2992b;display: flex; flex-direction: column;justify-content: flex-end;align-items: center; width: 25%; height:650px;overflow: hidden; background: cadetblue; border-radius: 20px">
                <div style="background: #e2992b; border-radius: 50%; width: 50px;height: 50px; text-align: center; line-height: 50px; font-weight: 600; font-size: 1.2rem; position: absolute; transform: translateX(-100px) translateY(-570px)">f.</div>
                <div style="color: aliceblue; font-size: 1.5rem; font-weight: 400; white-space: pre-line; position: absolute; transform: translateX(-50px) translateY(-70px) ">New
                    Generation
                    Workplace</div>
                <img src="src/imgs/part2/person.png">
            </div>
            <div style="border: 2px solid #e2992b; display: flex; flex-wrap: wrap; width: 75%">
                <div style="border: 2px solid #e2992b; display: flex; flex-direction: column; gap: 20px; width: fit-content">
                    <div style="font-size: 0.8rem">New</div>
                    <div style="font-size: 2rem; font-weight: 500; white-space: pre-line">Employe
                        On-off boarding</div>
                    <div style="white-space: pre-line">share your slides
                        pubic or privote</div>
                    <hr style="border-color: rgba(128,128,128,0.24)">
                    <svg style="border: 3px solid rgba(128,128,128,0.25);width: 36px; height: 30px; border-radius: 25%; padding: 3px" t="1732068019705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4251" width="200" height="200"><path d="M853.333333 507.733333H128v42.666667h733.866667l-145.066667 145.066667 29.866667 29.866666 192-192L746.666667 341.333333l-29.866667 29.866667 136.533333 136.533333z" fill="#444444" p-id="4252"></path></svg>
                </div>
                <div style="border: 2px solid #e2992b; display: flex; flex-direction: column; gap: 20px; width: fit-content">
                    <div style="font-size: 0.8rem">New</div>
                    <div style="font-size: 2rem; font-weight: 500; white-space: pre-line">Employe
                        On-off boarding</div>
                    <div style="white-space: pre-line">share your slides
                        pubic or privote</div>
                    <hr style="border-color: rgba(128,128,128,0.24)">
                    <svg style="border: 3px solid rgba(128,128,128,0.25);width: 36px; height: 30px; border-radius: 25%; padding: 3px" t="1732068019705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4251" width="200" height="200"><path d="M853.333333 507.733333H128v42.666667h733.866667l-145.066667 145.066667 29.866667 29.866666 192-192L746.666667 341.333333l-29.866667 29.866667 136.533333 136.533333z" fill="#444444" p-id="4252"></path></svg>
                </div>
                <div style="border: 2px solid #e2992b; display: flex; flex-direction: column; gap: 20px">
                    <div style="font-size: 0.8rem">New</div>
                    <div style="font-size: 2rem; font-weight: 500; white-space: pre-line">Employe
                        On-off boarding</div>
                    <div style="white-space: pre-line">share your slides
                        pubic or privote</div>
                    <hr style="border-color: rgba(128,128,128,0.24)">
                    <svg style="border: 3px solid rgba(128,128,128,0.25);width: 36px; height: 30px; border-radius: 25%; padding: 3px" t="1732068019705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4251" width="200" height="200"><path d="M853.333333 507.733333H128v42.666667h733.866667l-145.066667 145.066667 29.866667 29.866666 192-192L746.666667 341.333333l-29.866667 29.866667 136.533333 136.533333z" fill="#444444" p-id="4252"></path></svg>
                </div>
                <div style="border: 2px solid #e2992b; display: flex; flex-direction: column; gap: 20px">
                    <div style="font-size: 0.8rem">New</div>
                    <div style="font-size: 2rem; font-weight: 500; white-space: pre-line">Employe
                        On-off boarding</div>
                    <div style="white-space: pre-line">share your slides
                        pubic or privote</div>
                    <hr style="border-color: rgba(128,128,128,0.24)">
                    <svg style="border: 3px solid rgba(128,128,128,0.25);width: 36px; height: 30px; border-radius: 25%; padding: 3px" t="1732068019705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4251" width="200" height="200"><path d="M853.333333 507.733333H128v42.666667h733.866667l-145.066667 145.066667 29.866667 29.866666 192-192L746.666667 341.333333l-29.866667 29.866667 136.533333 136.533333z" fill="#444444" p-id="4252"></path></svg>
                </div>
                <div style="border: 2px solid #e2992b; display: flex; flex-direction: column; gap: 20px">
                    <div style="font-size: 0.8rem">New</div>
                    <div style="font-size: 2rem; font-weight: 500; white-space: pre-line">overflow:
                        hidden</div>
                    <div style="white-space: pre-line">border-radius: 50%
                        box-shadow: 0 10px 20px black</div>
                    <hr style="border-color: rgba(128,128,128,0.24)">
                    <svg style="border: 3px solid rgba(128,128,128,0.25);width: 36px; height: 30px; border-radius: 25%; padding: 3px" t="1732068019705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4251" width="200" height="200"><path d="M853.333333 507.733333H128v42.666667h733.866667l-145.066667 145.066667 29.866667 29.866666 192-192L746.666667 341.333333l-29.866667 29.866667 136.533333 136.533333z" fill="#444444" p-id="4252"></path></svg>
                </div>
                <div style="border: 2px solid #e2992b; display: flex; flex-direction: column; gap: 20px">
                    <div style="font-size: 0.8rem">flex 布局技巧</div>
                    <div style="font-size: 2rem; font-weight: 500; white-space: pre-line">左 width:25%
                        右 width:75%</div>
                    <div style="white-space: pre-line">white-space: pre-line
                        flex-warp: warp</div>
                    <hr style="border-color: rgba(128,128,128,0.24)">
                    <svg style="border: 3px solid rgba(128,128,128,0.25);width: 36px; height: 30px; border-radius: 25%; padding: 3px" t="1732068019705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4251" width="200" height="200"><path d="M853.333333 507.733333H128v42.666667h733.866667l-145.066667 145.066667 29.866667 29.866666 192-192L746.666667 341.333333l-29.866667 29.866667 136.533333 136.533333z" fill="#444444" p-id="4252"></path></svg>
                </div>

            </div>
        </div>
    </div>
</div>
<div style="display: flex; justify-content: center; min-width: 1280px">

    <div class="part3">

        <div class="part3-top">
            <div class="tab-label tab-active" id="label1">HTML</div>
            <div class="tab-label" id="label2">CSS</div>
            <div class="tab-label" id="label3">JS</div>
        </div>

        <div class="part3-bottom">
            <div id="tab1" class="tab-content" style="opacity: 1; display: flex">
                <img src="./src/imgs/tab_content1.png" alt="" height="500px">
                <div style="display: flex; height: 50px;padding: 10px ;width: 140px; background: black; border-radius: 10px;justify-content: space-between; align-items: center">
                    <div>
                        <div style="color: #dddddd">How it</div>
                        <div style="color: rgba(221,221,221,0.65); font-size: 0.7rem">Works</div>
                    </div>
                    <img src="./src/imgs/part3/work.jpg" alt="" width="45px">
                </div>
            </div>

            <div id="tab2" class="tab-content" style="opacity: 0">
                <img src="./src/imgs/tab_content3.png" alt="" height="500px">
            </div>

            <div id="tab3" class="tab-content" style="opacity: 0">
                <img src="./src/imgs/tab_content2.png" alt="" height="500px">
                <a href="https://www.baidu.com">baidu</a>
            </div>
        </div>
    </div>
</div>
<div style="display: flex; justify-content: center; min-width: 1280px">
    <div class="part4">
        <div class="part4-top">
            <div style="font-size: 0.7rem;">Module</div>
            <div style="white-space: pre-line; font-size: 2rem; margin-top: 1rem">Follow what's brand
            new in digital design</div>
        </div>
        <div class="part4-bottom">
            <div>
                <!--相对定位的父元素必须➕宽高-->
                <div style="width: 550px; overflow: hidden; background: lightpink; border-radius: 25px; position: relative; height: 550px">
                    <img src="./src/imgs/part4/male.png" alt="" width="400" style="position: absolute; transform: translateX(160px) translateY(100px)">
                    <div style="width: 50px;height: 50px;border-radius: 50%;background: lightyellow; position: absolute; transform: translateX(40px) translateY(20px)"></div>
                    <div style="position: absolute; transform: translateX(60px) translateY(33px); font-size: 1.2rem;font-weight: 700">COMPANY</div>
                    <div style="white-space: pre-line; position: absolute; transform: translateX(50px) translateY(100px);font-size: 2rem;font-weight: 500">Make
                        your company
                        awesome</div>
                    <div style="background: #f1f1f1; width: 300px; height: 100px; border-radius: 50px; transform: translateX(30px) translateY(380px); display: flex; justify-content: space-between;align-items: center; padding: 0 1.2rem">
                        <div style="display: flex; justify-content: center;align-items: center; gap: 10px">
                            <div style="width: 60px;height: 60px; border: 2px solid rgba(0,0,0,0.28);border-radius: 30px; display: flex;justify-content: center;align-items: center">
                                <div>ICON</div>
                            </div>
                            <div>
                                <div style="font-size: 1.8rem; font-weight: 400">Company</div>
                                <div style="font-size: 1.2rem">Singup</div>
                            </div>
                        </div>
                        <div style="font-size: 2rem;">→</div>
                    </div>
                </div>
                <div style="margin: 1.5rem 1rem 0 1rem; display: flex; align-items: center; gap: 20px">
                    <img src="./src/imgs/part4/small/logos/logo1.jpg" alt="" width="60" style="border-radius: 30px; border: 2px solid black">
                    <img src="./src/imgs/part4/small/logos/logo2.png" alt="" width="60" style="border-radius: 30px; border: 2px solid black; margin-left: -60px">
                    <img src="./src/imgs/part4/small/logos/logo3.png" alt="" width="60" style="border-radius: 30px; border: 2px solid black; margin-left: -60px">
                    <span style="font-weight:700;">+24k</span> <span>companies using it</span>
                </div>
            </div>

            <div>
                <!--相对定位的父元素必须➕宽高-->
                <div style="width: 550px; overflow: hidden; background: lightskyblue; border-radius: 25px; position: relative; height: 550px">
                    <div style="width: 50px;height: 50px;border-radius: 50%;background: #8e5cdd; position: absolute; transform: translateX(40px) translateY(20px)"></div>
                    <div style="position: absolute; transform: translateX(60px) translateY(33px); font-size: 1.2rem;font-weight: 700">EMPLOYEE</div>
                    <div style="white-space: pre-line; position: absolute; transform: translateX(50px) translateY(100px);font-size: 2rem;font-weight: 500">Empower
                        your journey
                        at company</div>
                    <img src="./src/imgs/part4/female.png" alt="" style="transform: translateX(170px) translateY(1px);position: absolute">
                    <div style="background: #f1f1f1; width: 300px; height: 100px; border-radius: 50px; transform: translateX(30px) translateY(380px); display: flex; justify-content: space-between;align-items: center; padding: 0 1.2rem">
                        <div style="display: flex; justify-content: center;align-items: center; gap: 10px">
                            <div style="width: 60px;height: 60px; border: 2px solid rgba(0,0,0,0.28);border-radius: 30px; display: flex;justify-content: center;align-items: center">
                                <div>ICON</div>
                            </div>
                            <div>
                                <div style="font-size: 1.8rem; font-weight: 400">Company</div>
                                <div style="font-size: 1.2rem">Singup</div>
                            </div>
                        </div>
                        <div style="font-size: 2rem;">→</div>
                    </div>
                </div>
                <div style="margin: 1.5rem 1rem 0 1rem; display: flex; align-items: center; gap: 20px">
                    <img src="./src/imgs/part4/small/avatars/person1.jpg" alt="" width="60" style="border-radius: 30px; border: 2px solid black">
                    <img src="./src/imgs/part4/small/avatars/person2.png" alt="" width="60" style="border-radius: 30px; border: 2px solid black; margin-left: -60px">
                    <img src="./src/imgs/part4/small/avatars/person3.png" alt="" width="60" style="border-radius: 30px; border: 2px solid black; margin-left: -60px">
                    <span style="font-weight:700;">+57k</span> <span>employees using it</span>
                </div>
            </div>

        </div>
    </div>
</div>
<div style="display: flex; justify-content: center; min-width: 1280px">
    <div class="part5">
        <div class="part5-top">
            <div style="font-size: 1.2rem; margin-bottom: 1rem;font-weight: 200">Benefits</div>
            <div style="white-space: pre-line; font-size: 2rem;font-weight: 800">Best Benefits for
            Everyone</div>
        </div>
        <div class="part5-bottom">
            <div>
                <div style="border: 4px solid #dddddd; width: 100px;height: 100px;border-radius: 50px; background: lightblue; text-align: center;line-height: 100px;color: black;margin: 1.5rem 0 1rem 1.5rem">LOGO</div>
                <div style="white-space: pre-line;font-weight: 700; font-size: 2rem;margin-left: 1.5rem">Match with
                    employee</div>
            </div>
            <div>
                <div style="border: 4px solid #dddddd; width: 100px;height: 100px;border-radius: 50px; background: lightblue; text-align: center;line-height: 100px;color: black;margin: 1.5rem 0 1rem 1.5rem">LOGO</div>
                <div style="white-space: pre-line;font-weight: 700; font-size: 2rem;margin-left: 1.5rem">Match with
                    employee</div>
            </div>
            <div>3</div>
            <div>
                <div style="border: 4px solid #dddddd; width: 100px;height: 100px;border-radius: 50px; background: lightblue; text-align: center;line-height: 100px;color: black;margin: 1.5rem 0 1rem 1.5rem">LOGO</div>
                <div style="white-space: pre-line;font-weight: 700; font-size: 2rem;margin-left: 1.5rem">Match with
                    employee</div>
            </div>
            <div>
                <div style="border: 4px solid #dddddd; width: 100px;height: 100px;border-radius: 50px; background: lightblue; text-align: center;line-height: 100px;color: black;margin: 1.5rem 0 1rem 1.5rem">LOGO</div>
                <div style="white-space: pre-line;font-weight: 700; font-size: 2rem;margin-left: 1.5rem">Match with
                    employee</div>
            </div>
            <div style="background-image: url('./src/imgs/part5/office.jpg')">
                <div style="width: 200px; height: 80px; border-radius: 20px; border: 4px solid white; text-align: center; line-height: 80px; font-size: 1.5rem">Get Started</div>
            </div>
        </div>
    </div>
</div>
<div style="display: flex; justify-content: center; min-width: 1280px">
    <div class="part6">
        <div class="part6-left">
            <div style="font-size: 0.7rem; opacity: 0.7; margin-top: 2rem">Clients</div>
            <div style="white-space: pre-line;font-size: 2rem; font-weight: 800; margin-top: 1.2rem">Funtasky is loved
            by companies</div>
            <div style="margin-top: 2rem">
                <div style="display: flex; gap: 10px">
                    <div style="height: 30px;width: 30px; display:flex; justify-content: center; align-items: center;background: rgba(128,128,128,0.79); border-radius: 15px; font-weight: 800; font-size: 0.7rem">f.</div>
                    <span style="border-bottom: 2px solid rgba(128,128,128,0.28); line-height: 30px">23 clients</span>
                </div>
                <div style="white-space: pre-line; margin-top: 4rem;line-height: 1.7rem">Beautiful is better than ugly.
                    Explicit is better than implicit.
                    Simple is better than complex.
                    Complex is better than complicated.
                    Flat is better than nested.
                    Sparse is better than dense.</div>

                <div style="font-weight: 900; margin-top: 3rem">Get Started ➡️</div>

            </div>
        </div>
        <div class="part6-right">
            <img src="src/imgs/part7/logos.png" alt="" width="100%">
        </div>
    </div>
</div>
<div style="display: flex; justify-content: center; min-width: 1280px">
    <div class="part7">
        <div class="part7-top">
            <div>What's SmartSlide</div>
            <div style="white-space: pre-line;font-weight: 900; font-size: 3rem; margin-top: 1.5rem">Our Global
                reach</div>
        </div>
        <div class="part7-bottom">
            <div style="background: black; border-radius: 40px; display: flex;flex-direction: column; padding:100px">
                <div style="color: #dddddd;">enjoy learning!</div>
                <div style="color: #dddddd; margin: 1.2rem 0 3rem 0; font-size: 2.8rem; white-space: pre-line">The all-in-one
                presentation solution</div>
                <div style="display: grid; grid-template-rows: 1fr 3fr 3fr 3fr 3fr;grid-template-columns: 2fr 1fr 1fr 1fr 1fr; color: #dddddd; row-gap: 36px">
                    <div>Names</div>
                    <div style="display: flex;justify-content: center">Customers</div>
                    <div style="display: flex;justify-content: center">Leaders</div>
                    <div style="display: flex;justify-content: center">Employees</div>
                    <div style="text-align: end">Total</div>

                    <div style="display: flex; align-items: center; gap: 15px">
                        <img src="./src/imgs/part8/india.png" alt="" height="50px" width="80px">
                        <div style="display: flex;flex-direction: column">
                            <div>India</div>
                            <div style="opacity: 0.5">By Avyaa Potel</div>
                        </div>
                    </div>
                    <div style="display: flex;align-items: center;justify-content: center">546</div>
                    <div style="display: flex;align-items: center;justify-content: center">546</div>
                    <div style="display: flex;align-items: center;justify-content: center">34565</div>
                    <div style="display: flex;align-items: center; justify-content: end">
                        <div style="width: 60px;height: 60px; border: 2px solid rgba(128,128,128,0.24); border-radius: 10px; display: flex; justify-content: center;align-items: center; flex-direction: column">
                            <div style="font-size: 1.3rem; font-weight: 700">4</div>
                            <div style="font-size: 0.6rem; opacity: 0.5">M</div>
                        </div>
                    </div>

                    <div style="display: flex; align-items: center; gap: 15px">
                        <img src="./src/imgs/part8/usa.png" alt="" height="50px" width="80px">
                        <div style="display: flex;flex-direction: column;">
                            <div>India</div>
                            <div style="opacity: 0.5">By Avyaa Potel</div>
                        </div>
                    </div>
                    <div style="display: flex;align-items: center;justify-content: center">546</div>
                    <div style="display: flex;align-items: center;justify-content: center">546</div>
                    <div style="display: flex;align-items: center;justify-content: center">34565</div>
                    <div style="display: flex;align-items: center; justify-content: end">
                        <div style="width: 60px;height: 60px; border: 2px solid rgba(128,128,128,0.24); border-radius: 10px; display: flex; justify-content: center;align-items: center; flex-direction: column">
                            <div style="font-size: 1.3rem; font-weight: 700">4</div>
                            <div style="font-size: 0.6rem; opacity: 0.5">M</div>
                        </div>
                    </div>

                    <div style="display: flex; align-items: center; gap: 15px">
                        <img src="./src/imgs/part8/canada.png" alt="" height="50px" width="80px">
                        <div style="display: flex;flex-direction: column">
                            <div>India</div>
                            <div style="opacity: 0.5">By Avyaa Potel</div>
                        </div>
                    </div>
                    <div style="display: flex;align-items: center;justify-content: center">546</div>
                    <div style="display: flex;align-items: center;justify-content: center">546</div>
                    <div style="display: flex;align-items: center;justify-content: center">34565</div>
                    <div style="display: flex;align-items: center; justify-content: end">
                        <div style="width: 60px;height: 60px; border: 2px solid rgba(128,128,128,0.24); border-radius: 10px; display: flex; justify-content: center;align-items: center; flex-direction: column">
                            <div style="font-size: 1.3rem; font-weight: 700">4</div>
                            <div style="font-size: 0.6rem; opacity: 0.5">M</div>
                        </div>
                    </div>

                    <div style="display: flex; align-items: center; gap: 15px">
                        <img src="./src/imgs/part8/switzerland.png" alt="" height="50px" width="80px">
                        <div style="display: flex;flex-direction: column">
                            <div>India</div>
                            <div style="opacity: 0.5">By Avyaa Potel</div>
                        </div>
                    </div>
                    <div style="display: flex;align-items: center;justify-content: center">546</div>
                    <div style="display: flex;align-items: center;justify-content: center">546</div>
                    <div style="display: flex;align-items: center;justify-content: center">34565</div>
                    <div style="display: flex;align-items: center; justify-content: end">
                        <div style="width: 60px;height: 60px; border: 2px solid rgba(128,128,128,0.24); border-radius: 10px; display: flex; justify-content: center;align-items: center; flex-direction: column">
                            <div style="font-size: 1.3rem; font-weight: 700">4</div>
                            <div style="font-size: 0.6rem; opacity: 0.5">M</div>
                        </div>
                    </div>

                    <div style="display: flex; align-items: center; gap: 15px">
                        <img src="./src/imgs/part8/uk.png" alt="" height="50px" width="80px">
                        <div style="display: flex;flex-direction: column">
                            <div>India</div>
                            <div style="opacity: 0.5">By Avyaa Potel</div>
                        </div>
                    </div>
                    <div style="display: flex;align-items: center;justify-content: center">546</div>
                    <div style="display: flex;align-items: center;justify-content: center">546</div>
                    <div style="display: flex;align-items: center;justify-content: center">34565</div>
                    <div style="display: flex;align-items: center; justify-content: end">
                        <div style="width: 60px;height: 60px; border: 2px solid rgba(128,128,128,0.24); border-radius: 10px; display: flex; justify-content: center;align-items: center; flex-direction: column">
                            <div style="font-size: 1.3rem; font-weight: 700">4</div>
                            <div style="font-size: 0.6rem; opacity: 0.5">M</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="display: flex; justify-content: center; min-width: 1280px">
    <div class="part8">
        <div class="part8-top">
            <div style="padding: 2rem;">
                <div style="white-space: pre-line; font-size: 5.5rem;font-weight: 900">My
                    Happy</div>
                <div style="white-space: pre-line; font-size: 5.5rem; font-weight: lighter">Work
                    Place</div>
                <div style=" width: 40px; height: 40px; background: url('src/imgs/part9/avatar1.png'); background-size: cover; border-radius: 50%; margin-top: 1rem"></div>
                <div style="font-size: 0.8rem; color: #353535; margin-top: 10px">scarlett green HR, google inc</div>
                <div style="font-size: 1.3rem; white-space: pre-line; margin-top: 2rem">It make office
                fun and efficient.
                I love it!</div>
            </div>
            <div style="width: 500px;position: relative">

                <img src="./src/imgs/part9/happy.jpg" alt="" style="width: 400px; position: absolute; transform: translateY(60px)">
                <div style="font-size: 15rem; position: absolute; transform: translateY(450px); color: #766666; font-weight: 700">f</div>
                <div style="width: 100px;height: 100px; font-size: 3rem; font-weight: 700; background: orange; position: absolute;transform: translateX(350px); border-radius:20px; display: flex; justify-content: center;align-items: center">f.</div>
            </div>
        </div>
        <div class="part8-bottom">
            <div style="width: 500px; height: 400px; overflow: hidden; position: relative; border-radius: 10px">
                <img src="./src/imgs/part9/office1.jpg" alt="" height="100%" style="filter: grayscale(100%); position: absolute;transform: translateX(-100px)">
                <div style="width: 500px; height: 400px; background: black; opacity: 0.6; position: absolute"></div>
                <div style="color: #dddddd; font-size: 3rem; position: absolute; transform: translateX(50px) translateY(50px)">Hello</div>
            </div>
            <div style="width: 500px; height: 400px; overflow: hidden; position: relative; border-radius: 10px;">
                <img src="./src/imgs/part9/office2.jpg" alt="" height="100%" style="filter: grayscale(100%); position: absolute;transform: translateX(-100px)">
                <div style="width: 500px; height: 400px; background: black; opacity: 0.6; position: absolute"></div>

            </div>
        </div>
    </div>
</div>

<div style="display: flex; justify-content: center; min-width: 1280px">
    <div class="part9">
        <div class="part9-top">
            <div style="font-size: 1.2rem; margin: 1rem">Subscription</div>
            <div style="font-size: 3rem">Pricing for you</div>
            <div id="search-box">
                <input type="text" name="" id="" placeholder="好好研究这个搜索框怎么做出来的">
                <button>Apply</button>
            </div>
        </div>
        <div class="part9-bottom">
            <div style="display: flex; justify-content: space-between">
                <div>
                    <div style="font-size: 0.7rem">Professional Plans</div>
                    <div style="white-space: pre-line; font-size: 2.4rem; margin-top: 13px">下面这三个
                        等宽框，是怎么做出来的？</div>
                </div>
                <div style="display: flex; justify-content: center; align-items: center">
                    <div>Monthly</div>

                    <input type="checkbox" name="" id="aaa" style="margin-left: 20px">
                    <label for="aaa">Yearly</label>

                    <div style="height: 30px; line-height: 30px; padding: 0 10px; margin-left: 20px; background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%); border-radius: 10px">25% save</div>

                </div>
            </div>
            <div style="display: flex; gap: 20px; margin-top: 60px">
                <div class="price" style="border: 4px solid rebeccapurple; width: 100%; box-shadow: 0 4px 10px rgba(0,0,0,0.22); padding: 2rem">
                    <div style="font-size: 1.5rem; font-weight: 700">Basic</div>
                    <div style="font-size: 1.5rem; font-weight: 700">Plan Menber</div>
                    <div style="margin-top: 2rem">
                        <span style="font-size: 4rem; font-weight: 900">Free</span>
                        <span>- Plan</span>
                    </div>
                    <div style="margin-top: 7px">Invite up to 02 candidates</div>
                    <div style="margin-top: 2rem; width: 300px; height: 70px; border: 4px solid rgba(0,0,0,0.33); border-radius: 10px; display: flex; justify-content: center; align-items: center; font-weight: 900">Get Started</div>

                    <div style="margin-top: 2rem; display: flex; flex-direction: column; gap: 20px">

                        <div style="display: flex; height: 20px; justify-items: center; gap: 20px;">
                            <div style="border: 2px solid rgba(0,0,0,0.33); color: green; border-radius: 50%; display: flex; justify-items: center; align-items: center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
                                </svg>
                            </div>
                            <div>1 GB storage memory</div>
                        </div>

                        <div style="display: flex; height: 20px; justify-items: center; gap: 20px;">
                            <div style="border: 2px solid rgba(0,0,0,0.33); color: green; border-radius: 50%; display: flex; justify-items: center; align-items: center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
                                </svg>
                            </div>
                            <div>1 GB storage memory</div>
                        </div>

                        <div style="display: flex; height: 20px; justify-items: center; gap: 20px;">
                            <div style="border: 2px solid rgba(0,0,0,0.33); color: green; border-radius: 50%; display: flex; justify-items: center; align-items: center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
                                </svg>
                            </div>
                            <div>1 GB storage memory</div>
                        </div>

                        <div style="display: flex; height: 20px; justify-items: center; gap: 20px;">
                            <div style="border: 2px solid rgba(0,0,0,0.33); color: green; border-radius: 50%; display: flex; justify-items: center; align-items: center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
                                </svg>
                            </div>
                            <div>1 GB storage memory</div>
                        </div>

                    </div>

                </div>
                <div class="price" style="border: 4px solid rebeccapurple; width: 100%; box-shadow: 0 4px 10px rgba(0,0,0,0.22); padding: 2rem">
                    <div style="font-size: 1.5rem; font-weight: 700">Basic</div>
                    <div style="font-size: 1.5rem; font-weight: 700">Plan Menber</div>
                    <div style="margin-top: 2rem">
                        <span style="font-size: 4rem; font-weight: 900">Free</span>
                        <span>- Plan</span>
                    </div>
                    <div style="margin-top: 7px">Invite up to 02 candidates</div>
                    <div style="margin-top: 2rem; width: 300px; height: 70px; border: 4px solid rgba(0,0,0,0.33); border-radius: 10px; display: flex; justify-content: center; align-items: center; font-weight: 900">Get Started</div>

                    <div style="margin-top: 2rem; display: flex; flex-direction: column; gap: 20px">

                        <div style="display: flex; height: 20px; justify-items: center; gap: 20px;">
                            <div style="border: 2px solid rgba(0,0,0,0.33); color: green; border-radius: 50%; display: flex; justify-items: center; align-items: center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
                                </svg>
                            </div>
                            <div>1 GB storage memory</div>
                        </div>

                        <div style="display: flex; height: 20px; justify-items: center; gap: 20px;">
                            <div style="border: 2px solid rgba(0,0,0,0.33); color: green; border-radius: 50%; display: flex; justify-items: center; align-items: center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
                                </svg>
                            </div>
                            <div>1 GB storage memory</div>
                        </div>

                        <div style="display: flex; height: 20px; justify-items: center; gap: 20px;">
                            <div style="border: 2px solid rgba(0,0,0,0.33); color: green; border-radius: 50%; display: flex; justify-items: center; align-items: center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
                                </svg>
                            </div>
                            <div>1 GB storage memory</div>
                        </div>

                        <div style="display: flex; height: 20px; justify-items: center; gap: 20px;">
                            <div style="border: 2px solid rgba(0,0,0,0.33); color: green; border-radius: 50%; display: flex; justify-items: center; align-items: center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
                                </svg>
                            </div>
                            <div>1 GB storage memory</div>
                        </div>

                    </div>

                </div>
                <div class="price" style="border: 4px solid rebeccapurple; width: 100%; box-shadow: 0 4px 10px rgba(0,0,0,0.22); padding: 2rem">
                    <div style="font-size: 1.5rem; font-weight: 700">Basic</div>
                    <div style="font-size: 1.5rem; font-weight: 700">Plan Menber</div>
                    <div style="margin-top: 2rem">
                        <span style="font-size: 4rem; font-weight: 900">Free</span>
                        <span>- Plan</span>
                    </div>
                    <div style="margin-top: 7px">Invite up to 02 candidates</div>
                    <div style="margin-top: 2rem; width: 300px; height: 70px; border: 4px solid rgba(0,0,0,0.33); border-radius: 10px; display: flex; justify-content: center; align-items: center; font-weight: 900">Get Started</div>

                    <div style="margin-top: 2rem; display: flex; flex-direction: column; gap: 20px">

                        <div style="display: flex; height: 20px; justify-items: center; gap: 20px;">
                            <div style="border: 2px solid rgba(0,0,0,0.33); color: green; border-radius: 50%; display: flex; justify-items: center; align-items: center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
                                </svg>
                            </div>
                            <div>1 GB storage memory</div>
                        </div>

                        <div style="display: flex; height: 20px; justify-items: center; gap: 20px;">
                            <div style="border: 2px solid rgba(0,0,0,0.33); color: green; border-radius: 50%; display: flex; justify-items: center; align-items: center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
                                </svg>
                            </div>
                            <div>1 GB storage memory</div>
                        </div>

                        <div style="display: flex; height: 20px; justify-items: center; gap: 20px;">
                            <div style="border: 2px solid rgba(0,0,0,0.33); color: green; border-radius: 50%; display: flex; justify-items: center; align-items: center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
                                </svg>
                            </div>
                            <div>1 GB storage memory</div>
                        </div>

                        <div style="display: flex; height: 20px; justify-items: center; gap: 20px;">
                            <div style="border: 2px solid rgba(0,0,0,0.33); color: green; border-radius: 50%; display: flex; justify-items: center; align-items: center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
                                </svg>
                            </div>
                            <div>1 GB storage memory</div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function (){

        const label1 = document.getElementById("label1")
        const label2 = document.getElementById("label2")
        const label3 = document.getElementById("label3")
        const tab1 = document.getElementById("tab1")
        const tab2 = document.getElementById("tab2")
        const tab3 = document.getElementById("tab3")


        label1.addEventListener("click", function () {
            tab1.style.opacity = "1"
            tab2.style.opacity = "0"
            tab3.style.opacity = "0"
            label1.classList.add('tab-active')
            label2.classList.remove('tab-active')
            label3.classList.remove('tab-active')
        })

        label2.addEventListener("click", function () {
            tab1.style.opacity = "0"
            tab2.style.opacity = "1"
            tab3.style.opacity = "0"
            label1.classList.remove('tab-active')
            label2.classList.add('tab-active')
            label3.classList.remove('tab-active')
        })

        label3.addEventListener("click", function () {
            tab1.style.opacity = "0"
            tab2.style.opacity = "0"
            tab3.style.opacity = "1"
            label1.classList.remove('tab-active')
            label2.classList.remove('tab-active')
            label3.classList.add('tab-active')
        })

    })
</script>
</body>
</html>